<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<Parent>23423424</Parent>
			<jubu></jubu>
		</div>
	</body>
</html>
<script>
	const {createApp}=Vue
	
	//局部组件联系
	const JuBu={
		data(){
			return {
				msg:'局部组件'
			}
		},
		template:`<div>{{msg}}</div>`
	}
	const app=createApp({
		components:{
			"jubu":JuBu,
		},
		data(){
			return {
				msg:"hello vue"
			}
		}
	})
		
	app.component("Parent",{
		data(){
			return{
				msg:'我是parent'
			}
		},
		methods:{
			sayHi(){
				alert("hi")
			}
		},
		template:`<div @click="sayHi()">{{msg}}</div>`
	})
	app.mount("#app")
</script>